<template>
    <div 
        :class="{
            blog_item:true,
            blog_item_left:show,
            blog_item_right:!show,
            blog_item_no_img:blogData.imgs.length==0,
        }">
        <div class="img_container" v-if="blogData.imgs.length>0">
            <img 
                :src="blogData.imgs.length>0?blogData.imgs[0][2]:''" 
                :alt="blogData.imgs.length>0?blogData.imgs[0][1]:'一篇文字'">
        </div>
        <div class="title_container">
            <div class="title">
                <router-link :to="'/bloginfo/'+blogData.id" class="item" target="_blank"> 
                    {{blogData.title}}
                </router-link>
            </div>
            <div class="other">
                <div>
                    <i class="el-icon-view"></i>{{blogData.read}}
                </div>
                <div>
                    <i class="el-icon-star-on"></i>{{blogData.star}}
                </div>
            </div>
            <div class="tags">
                <Tags :tags="blogData.tags">
                </Tags>
            </div>
        </div>
        <div class="content_container">
            <div class="content">
                <div>
                    <router-link :to="'/bloginfo/'+blogData.id" class="item" target="_blank"> 
                        {{blogData.content_md}}
                    </router-link>
                </div>
            </div>
            <div class="date">
                {{dateFormat(blogData.init_date)}}
            </div>
        </div>
    </div>
</template>

<script>
//博客item
import Tags from "@/components/public/Tags.vue"
import DateTool from '~/common/DateTool'
export default { 
    name: 'BlogItem',
    components:{
        Tags,
    },
    props:{
        show:{
            type:Boolean,
            default:true,
        },
        blogData:{
            type:Object,
            default:()=>{
                return {};
            },
        },
    },
    methods:{
        dateFormat(data){
            return DateTool.dateFormatByTimestamp(data);
        },
    },
}
</script>

<style scoped lang="scss">
.blog_item_left{
    grid-template-columns:1fr 1.3fr;
    grid-template-areas:"img_container title_container";
    >.title_container{
        text-align: left;
        align-items: flex-start;
    }
    >.content_container{
        align-items: flex-end;
    }
}
.blog_item_right{
    grid-template-columns:1.3fr 1fr;
    grid-template-areas:"title_container img_container";
    >.title_container{
        text-align: right;
        align-items: flex-end;
    }
    >.content_container{
        align-items: flex-start;
    }
}
.blog_item_no_img{
    grid-template-columns:1fr;
    grid-template-areas:"title_container";
    >.content_container{
        >.content{
            max-width: 100% !important;
        }
    }
}
.blog_item{
    display: grid;
    grid-gap:15px;
    position: relative;
    grid-template-rows: min-content;
    height: 230px;
    >.img_container{
        height: 100%;
        grid-area: img_container;
        box-shadow: 0 20px 20px -20px rgba(0,0,0,.6);
        img{
            max-width: 100%;
            height: 230px;
            border-radius: 0.2rem;
            object-fit: cover;
            object-position: center 0;
        }
    }
    >.title_container{
        grid-area: title_container;
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        >div{
            margin-bottom: 15px;
        }
        >.title{
            font-size: 23px;
            line-height: 1.5;
            font-weight: bold;
            display: inline-block;
            white-space: nowrap; 
            width: 100%; 
            overflow: hidden;
            text-overflow:ellipsis;
            a{
                background-color: transparent;
                background-position: 0 100%;
                background-size: 0% 50%;
                background-repeat: no-repeat;
                background-image: linear-gradient(#ffd966,#ffd966); 
                transition: all 0.2s;  
                &:hover{
                    background-size: 70% 50%;
                    background-image: linear-gradient(#ffd966,#ffd966);   
                }
            }
        }
        >.other{
            opacity: 0.8;
            font-size: 16px;
            line-height: 1;
            width: fit-content;
            display: grid;
            grid-template-columns:1fr 1fr;
            grid-gap:15px;
            >div{
                i{
                    margin-right:5px;
                    font-weight: bold;
                }
            }
        }
        >.tags{
            opacity: 0.8;
            font-size: 17px;
            line-height: 1;
        }
    }
    >.content_container{
        bottom: 0;
        position:absolute;
        width: 100%;
        height: fit-content;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        >.content{
            text-align: left;
            width: fit-content;
            min-width: 50%;
            max-width: 70%;
            height: fit-content;
            font-size: 19px;
            line-height: 1.5;
            margin-bottom: 15px;
            padding: 15px;
            box-sizing: border-box;
            box-shadow: 0 0 8px rgba(0,0,0,.101562);
            background-color: #ffffff;
            border-radius: 2px;
            >div{
                word-break:break-all;
                display:-webkit-box;
                -webkit-line-clamp:2;
                -webkit-box-orient:vertical;
                overflow:hidden;
                a{
                    color: #5e6d82;
                }
            }
        }
        >.date{
            font-size: 17px;
            line-height:1;
            opacity: 0.7;
        }
    }
}
</style>